<template>
	<view class="mine-container">
		<view class="user-info-section">
			<view class="avatar-box">
				<image class="avatar" :src="userInfo?.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
			</view>
			<view class="user-details">
				<text class="username">{{ userInfo?.username || userInfo?.mobile || '未登录' }}</text>
				<text class="user-id" v-if="userInfo">ID: {{ userInfo._id }}</text>
			</view>
			<view class="login-btn" v-if="!userInfo" @click="goToLogin">登录/注册</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item" @click="goToOfflineMap">
				<view class="menu-icon">
					<text class="iconfont icon-map"></text>
				</view>
				<view class="menu-text">离线地图</view>
				<view class="menu-arrow">></view>
			</view>
			
			<view class="menu-item" @click="goToWalkingRecord">
				<view class="menu-icon">
					<text class="iconfont icon-history"></text>
				</view>
				<view class="menu-text">轨迹记录</view>
				<view class="menu-arrow">></view>
			</view>
			
			<view class="menu-item" @click="goToSettings">
				<view class="menu-icon">
					<text class="iconfont icon-setting"></text>
				</view>
				<view class="menu-text">设置</view>
				<view class="menu-arrow">></view>
			</view>
		</view>
		
		<view class="logout-btn" v-if="userInfo" @click="handleLogout">退出登录</view>
		
		<view class="app-info">
			<text class="version">版本号: 1.0.0</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from '../../hooks';
import { userService } from '../../services/userService';

const userInfo = ref(null);

onMounted(() => {
	// 获取用户信息
	checkLoginStatus();
});

// 检查登录状态
const checkLoginStatus = () => {
	if (userService.isLoggedIn()) {
		userInfo.value = userService.getCurrentUser();
	} else {
		userInfo.value = null;
	}
};

// 跳转到登录页面
const goToLogin = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	});
};

// 跳转到离线地图页面
const goToOfflineMap = () => {
	uni.navigateTo({
		url: '/pages/offline-map/offline-map'
	});
};

// 跳转到轨迹记录页面
const goToWalkingRecord = () => {
	uni.navigateTo({
		url: '/pages/walking-record/walking-record'
	});
};

// 跳转到设置页面
const goToSettings = () => {
	uni.navigateTo({
		url: '/pages/settings/settings'
	});
};

// 处理退出登录
const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				userService.logout();
				userInfo.value = null;
			}
		}
	});
};
</script>

<style>
.mine-container {
	padding: 20rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
}

.user-info-section {
	display: flex;
	align-items: center;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	position: relative;
}

.avatar-box {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 20rpx;
	border: 1px solid #eee;
}

.avatar {
	width: 100%;
	height: 100%;
}

.user-details {
	flex: 1;
}

.username {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	color: #333;
}

.user-id {
	font-size: 24rpx;
	color: #999;
}

.login-btn {
	position: absolute;
	right: 30rpx;
	padding: 10rpx 20rpx;
	background-color: #007aff;
	color: #fff;
	border-radius: 30rpx;
	font-size: 28rpx;
}

.menu-list {
	background-color: #fff;
	border-radius: 15rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	position: relative;
	border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	width: 50rpx;
	height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.menu-text {
	flex: 1;
	font-size: 30rpx;
	color: #333;
}

.menu-arrow {
	color: #bbb;
	font-size: 30rpx;
}

.logout-btn {
	margin-top: 50rpx;
	padding: 25rpx 0;
	background-color: #fff;
	border-radius: 15rpx;
	text-align: center;
	color: #ff3b30;
	font-size: 32rpx;
}

.app-info {
	margin-top: 30rpx;
	text-align: center;
}

.version {
	font-size: 24rpx;
	color: #999;
}
</style> 